import 'package:pacsun/provider/userProv.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:pacsun/provider/userProv.dart' show UserProvider;
import 'package:pacsun/provider/putStoreProv.dart' show PutStoreProv;

import 'package:pacsun/view/user/userProfile.dart'
    show TTUploadScreen, TTIdInput, TTProfileLink;

void showStoreFrontBottomSheet(BuildContext context, int? taskId) {
  showModalBottomSheet(
    context: context,
    backgroundColor: Color.fromRGBO(34, 34, 34, 1),
    isScrollControlled: true,
    builder: (context) => Container(
      height: 592,
      padding: EdgeInsets.only(top: 16.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 12.w, right: 12.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  iconSize: 24,
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  icon: Icon(Icons.close, color: Colors.white),
                  onPressed: () => Navigator.pop(context),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      'Connect',
                      style: TextStyle(
                        color: Colors.white,
                        fontFamily: 'Poppins',
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                        letterSpacing: 0,
                      ),
                    ),
                  ),
                ),
                // Using context.select to only rebuild when specific data changes
                Builder(
                  builder: (context) {
                    final canSave = context.select<PutStoreProv, bool>(
                      (provider) =>
                          provider.uploadStoreFrontUrl !=
                          null, // Assuming you have this property
                    );

                    return Container(
                      width: 75,
                      height: 26,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                      ),
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          minimumSize: const Size(75, 26),
                          backgroundColor: canSave
                              ? const Color.fromRGBO(215, 48, 48, 1)
                              : Colors.grey, // Disabled color
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                          elevation: 0,
                          padding: EdgeInsets.zero,
                        ),
                        onPressed: canSave
                            ? () async {
                                await context
                                    .read<UserProvider>()
                                    .updateStoreFront(
                                        context,
                                        context
                                            .read<PutStoreProv>()
                                            .uploadStoreFrontUrl,
                                        taskId);

                                Navigator.pop(context);
                              }
                            : null,
                        child: Container(
                          width: 35,
                          height: 16,
                          alignment: Alignment.center,
                          child: const Text(
                            'SAVE',
                            style: TextStyle(
                              fontFamily: 'Poppins',
                              fontWeight: FontWeight.w600,
                              fontSize: 14,
                              height: 16 / 14,
                              letterSpacing: -0.41,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 24.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 30.h),
                Text(
                  'Storefront Link in Social Media',
                  style: TextStyle(
                    fontFamily: 'Poppins',
                    fontWeight: FontWeight.w600,
                    fontSize: 14.sp,
                    height: 1.0,
                    letterSpacing: 0,
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 5.h),
                Text(
                  'To better assist you in promoting your content, we encourage you to include a link to your Pacsun community profile in your third-party social media bio. The detailed steps are provided below.',
                  style: TextStyle(
                    fontFamily: 'Poppins',
                    fontWeight: FontWeight.w400,
                    fontSize: 12.sp,
                    height: 1.0,
                    letterSpacing: 0,
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 12.h),
                Text(
                  'Please upload a screenshot of your updated profile to claim your reward.',
                  style: TextStyle(
                    fontFamily: 'Poppins',
                    fontWeight: FontWeight.w400,
                    fontSize: 12.sp,
                    height: 1.0,
                    letterSpacing: 0,
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 16.h),
                const TTUploadScreen(),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

void showLinkToBottomSheet(BuildContext context, platform) =>
    showModalBottomSheet(
      context: context,
      backgroundColor: Color.fromRGBO(34, 34, 34, 1), // 背景色
      isScrollControlled: true, // 允许高度超过屏幕一半
      builder: (context) => Container(
        height: 592,
        padding: EdgeInsets.only(left: 24, top: 16), // 内边距
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                IconButton(
                  iconSize: 24,
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  icon: Icon(Icons.close, color: Colors.white),
                  onPressed: () => Navigator.pop(context),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      platform == 'tt'
                          ? 'LINK TO TIKTOK'
                          : platform == 'ins'
                              ? 'LINK TO INTAGRAM'
                              : 'LINK TO YOUTUBE',
                      style: TextStyle(
                        color: Colors.white,
                        fontFamily: 'Poppins',
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                        letterSpacing: 0,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 48),
              ],
            ),
            const SizedBox(height: 18),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Image.asset(
                  platform == 'tt'
                      ? 'assets/imgs/img_tiktok.png'
                      : platform == 'ins'
                          ? 'assets/imgs/img_ins.png'
                          : 'assets/imgs/img_youtube.png',
                  width: 30,
                  height: 30,
                ),
                const SizedBox(width: 8),
                Text(
                  platform == 'tt'
                      ? 'TikTok ID'
                      : platform == 'ins'
                          ? 'Instagram ID'
                          : 'YouTube ID',
                  style: TextStyle(
                    fontFamily: 'Poppins',
                    fontWeight: FontWeight.w400,
                    fontSize: 14,
                    height: 1.0,
                    letterSpacing: 0,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 13),
            SizedBox(height: 52, width: 327, child: TTIdInput()),
            const SizedBox(height: 13),
            const SizedBox(
              height: 52,
              width: 327,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Copy and Past Your Profile Link Below',
                    style: TextStyle(
                      fontFamily: 'Poppins',
                      fontWeight: FontWeight.w400,
                      fontSize: 14,
                      height: 1.0,
                      letterSpacing: 0,
                      color: Colors.white,
                    ),
                  ),
                  Text(
                    'How? >',
                    style: TextStyle(
                      fontFamily: 'Poppins',
                      fontWeight: FontWeight.w400,
                      fontSize: 14,
                      height: 1.0,
                      letterSpacing: 0,
                      color: Color.fromRGBO(255, 255, 255, 0.3),
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 13),
            const SizedBox(height: 52, width: 327, child: TTProfileLink()),
            const SizedBox(height: 13),
            SizedBox(
              height: 52,
              width: 327,
              child: Text.rich(
                style: TextStyle(
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.w400,
                  fontSize: 14,
                  height: 1.0,
                  letterSpacing: 0,
                  color: Colors.white,
                ),
                TextSpan(
                    text: 'Upload a Screenshot of Your Profile\n',
                    children: [
                      WidgetSpan(
                        child: SizedBox(height: 13), // 8px vertical space
                        alignment: PlaceholderAlignment.baseline,
                        baseline: TextBaseline.alphabetic,
                      ),
                      TextSpan(
                        text: platform == 'tt'
                            ? 'Path:TikTok-Me-Display TikTok ID and Account Name'
                            : platform == 'ins'
                                ? 'Path:Instagram-Me-Display Instagram ID and Account Name'
                                : 'Path:Youtube-Me-Display Youtbe ID and Account Name',
                        style: TextStyle(
                          fontFamily: 'Poppins',
                          fontWeight: FontWeight.w400,
                          fontSize: 12,
                          height: 1.0,
                          letterSpacing: 0,
                          color: Color.fromRGBO(255, 255, 255, 0.5),
                        ),
                      )
                    ]),
              ),
            ),
            const SizedBox(height: 17),
            const TTUploadScreen()
          ],
        ),
      ),
    );
